<template>
    <div class="index" style="height:100%">
        <!-- <loading v-model="isloading"></loading> -->
        <!-- <loading class="serve-loading" v-model="isLoading_api" text="服务器连接中"></loading> -->
        <l-loading :isloading="isLoading_api || isloading"></l-loading>
       
        <transition :name="direction === 'forward' ? 'slide-left' : 'slide-right'">
        <!-- <transition :name="transitionName"> -->
            <!-- <keep-alive> -->
                <router-view class="router-view"></router-view>
            <!-- </keep-alive> --> 
        </transition>
        <!-- </transition> -->
    </div>
</template>

<script>
    import { Tabbar, TabbarItem } from 'vux';
    import LLoading from 'components/LLoading';
    import { mapState, mapActions } from 'vuex';
    export default {
        data () {
            return {
                isLoading_api: false,
                sel: 0,
                transitionName: 'slide-right'
            };
        },
        components: {
            TabbarItem,
            Tabbar,
            LLoading
        },
        computed: {
            ...mapState({
                isloading: state => state.isLoading,
                direction: state => state.direction,
                phoneType: state => state.phoneType
            })
        },
        methods: {
            reload () {
                document.location.reload();
            },
            scrollTop () {
                this.$refs.viewBox.scrollTo(0);
            },
            ...mapActions([
                // 'updateDemoPosition',
                // 'setSession',
                // 'setRadioPlayer'
            ]),
            warn (text) {
                this.$vux.toast.show({
                    type: 'warn',
                    text: `<div style="background: rgba(0, 0, 0, 0.7);padding: 0.3rem 0.5rem; line-height: 24px;border-radius: 0.08rem">${text}</div>`,
                    width: '20em'
                });
            },
            toast (text, time) {
                time = time || 2000;
                this.$vux.toast.show({
                    type: 'text',
                    text: `<div style="background: #ffe26c;color: #5a4c4c;padding: 0.13rem 0.5rem; line-height: 24px;border-radius: 0.35rem; font-size: 12px;white-space: nowrap;">${text}</div>`,
                    position: 'middle',
                    time: time
                });
            },
            alert (content, fun, title) {
                if (title === undefined) {
                    title = '提示';
                };
                this.$vux.alert.show({
                    title: title,
                    content: content,
                    onHide () {
                        fun && fun();
                    }
                });
            },
            confirm (content, fun, title) {
                this.$vux.confirm.show({
                    title: title,
                    content: content,
                    onConfirm () {
                        fun();
                    }
                });
            }
        },
        mounted () {
            let that = this;
            window.api.appThis = that;
            window.alert = this.alert;
            window.confirm = this.confirm;
            window.warn = this.warn;
            window.toast = this.toast;
            console.log(this.$router);
            // this.handler = () => {
            //     if (this.path === '/demo') {
            //         this.updateDemoPosition(this.$refs.viewBox.getScrollTop())
            //     }
            // }
            // this.box = this.$refs.viewBox.getScrollBody()
            // if (this.path === '/demo') {
            //     this.box.addEventListener('scroll', this.handler, false)
            // }
        },
        watch: {
            // $route (to, from) {
            //     // const toDepth = to.name;
            //     // console.log(to.name);
            //     // console.log(from.name);
            //     // const fromDepth = from.name;
            //     // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
            // }
            $route (to, from) {
                let isBack = this.$router.isBack;
                debugger;
                if (isBack) {
                    this.transitionName = 'slide-right';
                } else {
                    this.transitionName = 'slide-left';
                }
                this.$router.isBack = false;
            }
        }
    };
</script>

<style lang="less">
    // @import '~vux/src/styles/reset.less';
    @import "./common/less/mixin.less";
    .weui-dialog__bd{
        margin: 0.6rem 0;
        padding: 0!important;
        min-height: 0!important;
        div{
            font-size: 13px!important;
            color: #857c7c!important;  
        }
    }
    .weui-toast{
        // background: rgba(17, 17, 17, 0.8);
        .weui-toast__content{
            // padding: 0.3rem 0;
            // letter-spacing: 2px;
        }
    }
    .weui-dialog__hd{
        margin: 0.6rem 0;
        padding: 0!important;
        font-size: 17px!important;
        color: #5a4c4c!important;
    }
    .weui-dialog__btn{
        color: #5a4c4c!important;
        font-size: 15px!important;
    }
    .weui-dialog__btn_primary{
        color: #ffa260!important;
    }
    .weui-toast{
        z-index: 99999999!important;
        transform: translate3d(-50%, 0, 0)!important;
        background: transparent!important;
        width: auto!important;
    }
    .vux-header h1{
        font-size: 17px;
        font-weight: bold;
    }
    .weui-mask_transparent{
        z-index: 99999999!important;
        transform: translate3d(0, 0, 0)!important;
        width: 100vw;
        height: 100vh;
    }
    .weui-loading_toast{
        position: relative;
        z-index: 99999999!important;
        transform: translate3d(0, 0, 0)!important;
    }
    .vux-header{
        background-color: #fff!important;
        &.l-header{
            .border-bottom-1px(#eeeded);
        }
        .vux-header-right{
            a{
                color: #333!important;
            }
        }
        h1{
            color: #333!important;
        }
    }
    .index{
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #5a4c4c;
        width: 100%;
        overflow: hidden;
        .router-view {
          width: 100%;
          // animation-duration: 0.5s;
          // animation-fill-mode: both;
          // backface-visibility: hidden;
        }
        // .router-view{
            // position: absolute;
            // left:0;
            // top: 0;
            // height: 100%;
            // width: 100%;
            // transition: all .5s cubic-bezier(.55,0,.1,1);
            // background-color: #f2f2f2;
            // overflow: hidden;
            // -webkit-overflow-scrolling: touch;
            // webkit-backface-visibility:hidden;
        // }
        /* 当child-view的内容过多时会撑开child-view使得内部能够滚动 */
        // .slide-left-enter, .slide-right-leave-active {
        //     opacity: 0;
        //     -webkit-transform: translate3d(100%, 0, 0);
        //     transform: translate3d(100%, 0, 0);
        //     transition-delay: .5s;
        //     -webkit-transition-delay: .5s;
        // }
        // .slide-left-leave-active, .slide-right-enter {
        //     opacity: 1;
        //     -webkit-transform: translate3d(-100%, 0, 0);
        //     transform: translate3d(-100%, 0, 0);
        //     transition-delay: .5s;
        //     -webkit-transition-delay: .5s;
        // }
        
        /* .router-view {
             // position: absolute;
             width: 100%;
             transition: all .8s ease;
             // top: 40px;
        }
        
        .slide-left-enter,
         .slide-right-leave-active {
             opacity: 0;
            -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
        }
        
        .slide-left-leave-active,
        .slide-right-enter {
             opacity: 0;
            -webkit-transform: translate(-100%, 0);
            transform: translate(-100% 0);
        } */

        .slide-left-enter-active,
        .slide-left-leave-active,
        .slide-right-enter-active,
        .slide-right-leave-active {
          will-change: transform;
          transition: all 0.5s;
          height: 100%;
          // top: 46px;
          position: absolute;
          backface-visibility: hidden;
          perspective: 1000;
          transform: translate3d(0, 0, 0);
        }
        .slide-left-enter {
            // opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
        .slide-left-leave-active {
            // opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
        .slide-right-enter {
            // opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
        .slide-right-leave-active {
            // opacity: 0;
            transform: translate3d(100%, 0, 0);
        } 




        // .vux-slide-left-enter-active {
        //     animation: fadeinR .5s;
        //     transform: translate3d(0, 0, 0);
        // }
        // .vux-slide-right-enter-active {
        //     animation: fadeinL .5s;
        //     transform: translate3d(0, 0, 0);
        // }
        // @keyframes fadeinR {
        //     0% {
        //         opacity: 0;
        //         transform: translateX(150px);
        //     }
        //     100% {
        //         opacity:1;
        //         transform:translateX(0);
        //     }
        // }
        // @keyframes fadeinL{
        //     0% {
        //         opacity: 0;
        //         transform: translateX(-150px);
        //     }
        //     100% {
        //         opacity: 1;
        //         transform: translateX(0);
        //     }
        // }
        // .slide-left-enter-active {
        //   animation-name: popInLeft;
        // }
        // .slide-left-leave-active {
        //   animation-name: popOutRight;
        // }
        // .slide-right-enter-active {
        //   perspective: 1000;
        //   animation-name: popInRight;
        // }
        // .slide-right-leave-active {
        //   animation-name: popOutLeft;
        // }
        // @keyframes popInLeft {
        //   from {
        //     opacity: 0;
        //     transform: translate3d(-100%, 0, 0);
        //   }
        //   to {
        //     opacity: 1;
        //     transform: translate3d(0, 0, 0);
        //   }
        // }
        // @keyframes popOutLeft {
        //   from {
        //     opacity: 1;
        //   }
        //   to {
        //     opacity: 0;
        //     transform: translate3d(-100%, 0, 0);
        //   }
        // }
        // @keyframes popInRight {
        //   from {
        //     opacity: 0;
        //     transform: translate3d(100%, 0, 0);
        //   }
        //   to {
        //     opacity: 1;
        //     transform: translate3d(0, 0, 0);
        //   }
        // }
        // @keyframes popOutRight {
        //   from {
        //     opacity: 1;
        //   }
        //   to {
        //     opacity: 0;
        //     transform: translate3d(100%, 0, 0);
        //   }
        // }
    }
</style>
